<template>

  <!-- 弹出对话框进行修改用户信息 -->
  <el-dialog v-model="dialogTableVisible" title="修改标签信息">
    <el-form :model="profileInfo" label-width="120px">
      <el-form-item label="用户名">
        <el-input v-model="profileInfo.Username" :disabled="isDis.value"></el-input>
      </el-form-item>
      <el-form-item label="手机号码">
        <el-input v-model="profileInfo.PhoneNumber"></el-input>
      </el-form-item>
      <el-form-item label="Email">
        <el-input v-model="profileInfo.Email"></el-input>
      </el-form-item>
      <el-form-item label="Password">
        <el-input type="password" v-model="profileInfo.Password"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit('add')">确认</el-button>
        <el-button @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>


  <!-- 弹出消息框 -->
  <div id="uploadA">
    <el-dialog v-model="centerDialogVisible" title="更换头像" width="30%" center>
      <upload @eventParent="UpSuccesss"/>
    </el-dialog>
  </div>

  <!-- 头像信息 -->
  <div class="demo-basic--circle">
    <div class="block">
      <el-avatar :size="100" :src="circleUrl" @click="centerDialogVisible = true"></el-avatar>
    </div>
  </div>

  <!-- 详细信息 -->
  <el-descriptions
      class="margin-top"
      :column="1"
      border>
    <el-descriptions-item>
      <template #label>
        <el-icon>
          <user/>
        </el-icon>
        Username
      </template>
      {{ profileInfo.Username }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <el-icon>
          <iphone/>
        </el-icon>
        手机号码
      </template>
      {{ profileInfo.PhoneNumber }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <el-icon>
          <iphone/>
        </el-icon>
        Email
      </template>
      {{ profileInfo.Email }}
    </el-descriptions-item>
  </el-descriptions>


  <el-button class="cancel" @click="modify" type="primary" plain>修改账户</el-button>
  <el-button class="cancel" @click="cancel" type="danger" plain>注销账户</el-button>
</template>

<script lang="ts">
import {onBeforeMount, onBeforeUpdate, reactive, ref, toRefs} from "vue";
import {useStore} from 'vuex'
import {useRouter} from 'vue-router'

import {ElMessageBox, ElMessage} from 'element-plus'
import {
  User,
  Iphone,
  Location,
  Tickets,
  OfficeBuilding
} from '@element-plus/icons-vue'

import Upload from "@/components/upload/Upload.vue";
import {GETA} from "@/api/index";
import {PUTA} from "../../../api";
import $ from 'jquery'
import localstorage from '@/tools/localstorage';


export default {
  name: "ProfileInfo",
  components: {
    User,
    Iphone,
    Location,
    Tickets,
    OfficeBuilding,
    Upload
  },
  setup() {
    const dialogTableVisible = ref(false)
    const upl = "";
    const router = useRouter()
    const isDis = ref(true)

    const profileInfo = ref(JSON.parse(localStorage.getItem("user") as string));

    onBeforeMount(() => {
      reload()
    })
    onBeforeUpdate(() => {
      reload()
    })
    const onCancel = () => {
      dialogTableVisible.value = false
    }
    const UpSuccesss = (data: Boolean) => {
      reload()
    }

    const reload = () => {
      const id = JSON.parse(localStorage.getItem("user") as string)?.Id
      GETA(`/User/GetUserById?id=${id}`, {}).then(res => {
        profileInfo.value = res.data.data
        localStorage.setItem("user", JSON.stringify(res.data.data))
      })
      profileInfo.value = localstorage.getItemObject("user")
    }

    const onSubmit = (val:string) => {
      const user = {
        username: profileInfo.value.Username,
        password: profileInfo.value.Password,
        phoneNumber: profileInfo.value.PhoneNumber,
        email: profileInfo.value.Email,
        id: profileInfo.value.Id,
        ip: profileInfo.value.Ip
      }
      console.log(user)
      PUTA("User/UserUpdate", {
        ...user
      }, {}).then(res => {
        console.log(res)
        ElMessage.success("修改成功")
        reload()
        setTimeout(() => {
          dialogTableVisible.value = false
        }, 2000)
      }).catch(err => {
        console.log(err)
      })
    }

    const state = reactive({
      circleUrl: profileInfo?.value?.Avatar,
      // circleUrl: "https://localhost:7083/file/1.jpg"
    })

    const cancel = () => {
      console.log("注销账户")
      ElMessageBox.confirm(
          '将会注销该账户，确定注销吗?',
          'Warning',
          {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
          }
      ).then(() => {
        console.log(profileInfo)
        PUTA(`/User/UserDelete?id=${profileInfo.value.Id}`).then(res => {
          localstorage.removeItem("user")
          if (res.data.status === 200) {
            ElMessage.success("注销账户成功")
            router.push("/login")
          }
        }).catch(err => {
          console.log(err)
          ElMessage.error("出错啦")
        })
      }).catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消操作',
        })
      })
    }

    const modify = () => {
      dialogTableVisible.value = true;
    }

    return {
      ...toRefs(state),
      profileInfo,
      centerDialogVisible: ref(false),
      cancel,
      dialogTableVisible,
      modify,
      isDis,
      onCancel,
      onSubmit,
      UpSuccesss,
      upl
    }
  },
}
</script>

<style lang="scss" scoped>
.demo-basic--circle {
  text-align: center;
}

.cancel {
  width: 100%;
}

</style>